<template>
  <div class="card">
    <slot name="title">
      <div class="title" v-if="title" v-html="title" :class="{border:showBorder}"></div>
    </slot>
    <div class="body">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    title: {
      type: String,
      default: null
    },
    showBorder: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
.border{
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom:10px;
}
</style>
